<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view locale="#{languageDetails.locale}">
<b> <h:outputText value="#{msg.user_details_form}">
</h:outputText> </b>
<p><h:messages style="color: blue" /></p>
<h:form id="userDetailsForm">

         <h:outputText style="color: red"
                rendered="#{userDetails.ageCorrected}"
                value="Your age corrected to #{userDetails.age}">
         </h:outputText>
         <br>
         <h:outputText style="color: red"
                 rendered="#{userDetails.showNameErrorMessage}"
                 value="#{userDetails.nameErrorMessage}">
         </h:outputText>
         <br>
         
         <h:outputText style="color: red"
                 rendered="#{userDetails.showErrorMessage}"
                 value="#{userDetails.errorMessage}"></h:outputText>
                 
         <h:panelGrid columns="2">
         <h:outputText value="#{msg.name}"></h:outputText>
         <h:inputText id="name" value="#{userDetails.name}" required="true"
                 requiredMessage="#{msg.enter_name}"
                 validatorMessage="#{msg.enter_name_validlength}"
                 valueChangeListener="#{userDetails.valueChangeInput}">
                  <f:validateLength minimum="3" />
         </h:inputText>
         
         <h:outputText value="#{msg.age}"></h:outputText>
         
         
         <h:inputText id="age" value="#{userDetails.age}" required="true"
                 requiredMessage="#{msg.enter_age}"
                 validatorMessage="#{msg.enter_correctage}">
                 <f:validateLength maximum="3" />
         </h:inputText>
         
         
         <h:outputText value="#{msg.email}"></h:outputText>
         
         <h:inputText id="email" value="#{userDetails.email}" required="true"
                 requiredMessage="#{msg.enter_email}"></h:inputText>
                 
         <h:outputText value="#{msg.dob}"></h:outputText>
         
         <h:inputText id="dob" value="#{userDetails.dob}" required="true"
                 requiredMessage="#{msg.enter_dob}"
                converterMessage="#{msg.enter_dobpattern}">
                <f:convertDateTime type="date" pattern="MM/dd/yyyy" />
         </h:inputText>
         
         <h:commandButton id="confirm" value="Confirm Age"
                 actionListener="#{userDetails.calculateAgeListener}"></h:commandButton>
         <h:commandButton id="submit" value="#{msg.submit}"
                  action="#{userDetails.submitUserDetails}"></h:commandButton>
         </h:panelGrid>
</h:form>
</f:view>
</body>
</html>